<template>
  <view>
    <uni-popup ref="remarks" type="bottom" zindex>
      <view class="box-con padding">
        <scroll-view scroll-y="true" scroll-with-animation class="sg_remarks">
          <view class="top-title">
            <view class="modalTitle pad_cl">备注</view>
            <view class="pad_b48 padding-bottom-xs margin-top-sm text-c9 text-sm">请选择您想提前准备好的服务</view>
            <view class="close-btn" @click="close"><text class="cuIcon-close text-lg closBtn"></text></view>
          </view>
          <view class="text-df text-c6 pad_b48 margin-top-xs margin-bottom">可选标签</view>
          <view class="smainCont sg">
            <view class="asitem textar">
              <view class="leavList sg flex flex-wrap margin-top-sm">
                <block v-for="(item, index) in rmkLableList" :key="index">
                  <text v-if="item.type == '998'" class="levItem text-df text-c9" :class="{ act: item.isSelect }"
                    @click="taprmkItem(index,item)">
                    {{ item.name || '' }}
                  </text>
                </block>
              </view>
              <view class="tarbox sg">
                <textarea v-model="areaValue" class="describe" maxlength="200" placeholder-class="asitexta"
                  placeholder="请输入您的留言，我们会尽快跟进"></textarea>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="cback_btn"><view class="full_btn" @click="sureBtn16()">确定</view></view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  const emit = defineEmits(["confirm"])
  const remarks = ref(null)
  const areaValue = ref('')
  const selectData = computed(() => {
    
  })
  const rmkLableList = ref([
    {
      data_lever: null,
      data_status: "20",
      ext: {},
      label_id: 16,
      label_status: "5",
      name: "免费停车劵",
      pushCache: true,
      type: "998",
      isSelect: false
    },
    {
      data_lever: null,
      data_status: "20",
      ext: {},
      label_id: 15,
      label_status: "5",
      name: "开发票",
      pushCache: true,
      type: "998",
      isSelect: false
    },
    {
      data_lever: null,
      data_status: "20",
      ext: {},
      label_id: 14,
      label_status: "5",
      name: "喝了酒",
      pushCache: true,
      type: "998",
      isSelect: false
    },
    {
      data_lever: null,
      data_status: "20",
      ext: {},
      label_id: 13,
      label_status: "5",
      name: "需要接",
      pushCache: true,
      type: "998",
      isSelect: false
    }
  ])

  const open = () => {
    remarks.value.open()
  }

  const close = () => {
    remarks.value.close()
  }

  const taprmkItem = (index, item) => {
    // let isSelect = this.rmkLableList[index].isSelect;
    item.isSelect = !item.isSelect
    // this.$set(this.rmkLableList[index], 'isSelect', !isSelect);
  }

  //确定
  const sureBtn16 = () => {
    const selectedItems = rmkLableList.value.filter(item => item.isSelect);
    const statues = selectedItems.map(item => item.name);
    // const statues = selectedItems.reduce((acc, item) => {
    //     acc.name = item.name;  
    //     return acc;
    //   }, {}); 
    emit("confirm", { statue: statues})
    close()
  }

  defineExpose({ open, close })
</script>

<style lang="scss" scoped>
  .box-con {
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    padding-bottom: 40rpx;
    flex-shrink: 0;
    min-height: 602rpx;
    max-height: 96vh;
    position: relative;
    .modalTitle {
      font-size: 36rpx;
      font-weight: bold;
    }

    .close-btn {
      position: absolute;
      right: 0rpx;
      top: 0rpx;
    }
  }

  .selectService .smainCont .asitem.textar {
    width: 100%;
    padding: 0 48rpx 0 48rpx;
  }

  .selectService .smainCont .asitem {
    width: 100%;
    height: 100%;
  }

  .leavList.sg .levItem {
    height: 80rpx;
    line-height: 81rpx;
  }

  .levItem.act {
    background: rgba(86, 191, 122, 0.15);
    border: 1px solid #56bf7a;
    color: #56bf7a;
  }

  .levItem {
    display: inline-block;
    min-width: 90rpx;
    height: 60rpx;
    line-height: 61rpx;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    border-radius: 8rpx;
    color: #666;
    font-size: 28rpx;
    margin: 0 30rpx 30rpx 0;
    text-align: center;
    padding: 0 20rpx;
  }

  .asitem .tarbox.sg {
    height: 150rpx;
  }

  .asitem .tarbox {
    width: 100%;
    height: 206rpx;
  }

  .asitem .describe {
    padding: 26rpx;
    font-size: 28rpx;
    width: 100%;
    height: 100%;
    background: rgba(196, 196, 196, 0.15);
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    border-radius: 8rpx;
  }
  .cback_btn {
  	padding: 0 8rpx;
  	margin: 40rpx 0 40rpx 0;
  }
  .full_btn {
      padding: 0 48rpx;
      width: 100%;
      height: 100rpx;
      line-height: 101rpx;
      text-align: center;
      color: #fff;
      background-color: #56bf7a;
      border-radius: 100rpx;
      font-size: 32rpx;
  }
</style>